// src/components/todo-list.vue

<template>
    <div>我是todo-list组件</div>
    <div>
        <div>{{ todos.length }}</div>
        <!-- 模板的其余部分 -->
        <todo-item></todo-item>
    </div>
</template>

<script lang="ts">
import {  defineComponent, provide, reactive } from "vue";
import TodoItem from './todo-item.vue'

export default defineComponent({
    name: 'TodoList',
    components: {
        TodoItem
    },
    setup() {
        /**
         * provide两个参数：
         * name<String类型>：注入的属性名称
         * value：注入的属性值
         */
        provide('user', 'John Doe')
        const todos = reactive(['Feed a cat', 'Buy tickets'])

        return {
            todos
        }
    }
})
</script>